<template>
  <div>
    <div>
      <el-row :span="24" style="margin:26px 0 0;">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="100px">
          <!-- <el-form-item label="提现类型">
            <el-select v-model="formInline.tranferType" style="width: 150px;">
              <el-option label="全部" value="1"></el-option>
              <el-option label="红包股转账" value="1"></el-option>
              <el-option label="创客提现" value="1"></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="提现状态">
            <el-select v-model="formInline.status" style="width: 150px;">
              <el-option label="全部" value=""></el-option>
              <el-option label="处理中" value="P"></el-option>
              <el-option label="成功" value="TRANSFER_SUCCESS"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="转账时间">
            <el-date-picker type="date" placeholder="开始时间" v-model="startTime" style="width:180px;">
            </el-date-picker>
            到
            <el-date-picker type="date" placeholder="结束时间" v-model="endTime" style="width:180px;">
            </el-date-picker>
          </el-form-item>
          <el-button type="primary" @click="fetchData(1)">查询</el-button>
          <el-button type="primary" @click="deriveSubmit">导出</el-button>
        </el-form>
      </el-row>

      <el-table :data="pageInfo.dtos" v-loading="table_loading" element-table_loading-text="加载中" stripe height="500"
        style="width: 100%">
        <el-table-column label="平台订单号" width="150" prop='outTradeNo'>
        </el-table-column>

        <!-- <el-table-column width="150" label="出款账号" prop='payerIdentity'>
        </el-table-column> -->
        <el-table-column width="150" label="入款账号" prop='payeeIdentity'>
        </el-table-column>
        <el-table-column label="转账金额" width="100" prop='transferAmount'>
        </el-table-column>
        <el-table-column width="150" label="转账时间" prop='orderTime'>
        </el-table-column>
        <el-table-column width="200" label="银行卡名称" prop='cardName'>
        </el-table-column>
        <el-table-column width="200" label="开户人名称" prop='userName'>
        </el-table-column>
        <el-table-column label="用户ID" width="150">
          <template scope="scope">
            <router-link :to="'/user/user_detail/'+scope.row.userId" target="_blank"><span
                class="pointer">{{ scope.row.userId}}</span></router-link>
          </template>
        </el-table-column>
        <!--        <el-table-column-->
        <!--          width="100"-->
        <!--          label="快捷通订单号"-->
        <!--          prop='tradeNo'>-->
        <!--        </el-table-column>-->

        <el-table-column width="150" label="回调时间" prop='backTime'>
        </el-table-column>
        <el-table-column width="160" label="最终状态">
          <template scope="scope">
            <div class="failyy" @click="tcopen(scope.row.failReason)">
              {{scope.row.failReason}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="系统手续费" width="150" fixed="right" prop='transferSysAmount'>
        </el-table-column>
        <!-- <el-table-column
          width="150"
          fixed="right"
          label="转账类型"
          >
          <template scope="scope">
            <span v-if="scope.row.tranferType == '1'">红包股转账</span>
            <span v-if="scope.row.tranferType == '2'">创客提现</span>
          </template>
        </el-table-column> -->

        <el-table-column fixed="right" width="100" label="转账状态">
          <template scope="scope">
            <span class="success_stuts" v-if="scope.row.status == '成功'">成功</span>
            <span class="fail_stuts" v-else-if="scope.row.status == '失败'">失败</span>
            <span class="ing_stuts" v-else-if="scope.row.status == '处理中'">处理中</span>
          </template>

          <!-- <template scope="scope">
            <span v-if="scope.row.status == 'P'">
              <el-button type="primary" @click="transferAccount(scope.row.outTradeNo)">转账</el-button>
            </span>
            <span v-else-if="scope.row.status == 'F' || scope.row.status == 'TRANSFER_FAIL'">失败</span>
            <span v-else>成功</span>
          </template> -->
        </el-table-column>
        <!-- <el-table-column label="操作" width="100" fixed="right">
          <template scope="scope">
            <span v-if="scope.row.status1 == 'F' && scope.row.tradeNo == 'DJ'">
              <el-button type="primary" @click="transferAccount(scope.row.outTradeNo)">转账</el-button>
            </span>
            <span v-if="scope.row.status1 == 'P' && scope.row.tradeNo == 'DJ'">
              <el-button type="primary" @click="transferAccount(scope.row.outTradeNo)">转账</el-button>
            </span>
          </template>
        </el-table-column> -->
      </el-table>
      <div class="paginate">
        <el-pagination @current-change="handleCurrentChange" :current-page="pageInfo.pageNum"
          :page-size="pageInfo.pageSize" layout="total, prev, pager, next, jumper" :total="pageInfo.count">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "cashList",
    data() {
      return {
        table_loading: true,
        formInline: {
          status: '',
          tranferType: '1',
          orderTimeStart: '',
          orderTimeEnd: '',
          pageNum: 1,
        },
        pageInfo: {
          pageNum: 1,
          pageSize: 20,
          count: 1,
          dtos: []
        },
        CashStat: {
          inAmt: 0,
          outAmt: 0,
          lastAmt: 0
        },
        startTime: '',
        endTime: '',
        
      }
    },
    created() {
      this.initializationTime();
    },
    mounted() {
      let vm = this
      vm.fetchData(vm.pageInfo.pageNum)
    },
    methods: {
      /**
       * @Description: 获取提现记录列表
       * @author liuChen
       * @date 2020-09-08 13:07
       */
      fetchData(page = 1) {
        let vm = this
        vm.table_loading = true
        // vm.table_loading = true
        vm.pageInfo.pageNum = page
        vm.formInline.pageNum = page

        vm.formInline.orderTimeStart = vm.startTime.getTime();
        vm.formInline.orderTimeEnd = vm.endTime.getTime();
        // vm.formInline.tranferType = '1'
        // if(!vm.formInline.tranferType){
        //      console.log("请输出内容！");
        //      // return;
        // }
        console.log('=========== cash list', vm.formInline)
        vm.dataApi.ajax('selectKjtTransfer', vm.formInline, res => {
          console.log('请求下来的===',res)
          vm.table_loading = false
          let data = JSON.parse(JSON.stringify(res))
          vm.pageInfo.dtos = data.dtos
          vm.pageInfo.count = data.count
          vm.getCashStat()
        });
      },
      initializationTime(){
        this.endTime=new Date();
        var begin=new Date();
        var end=new Date();
        var timetime=new Date(begin.setMonth((new Date().getMonth()-1)));
        this.startTime=timetime;
        // console.log('开始时间：',timetime，'当前时间：',this.endTime)
      },
      getCashStat() {
        let vm = this
        vm.dataApi.ajax('sumKjtTransfer', vm.formInline, res => {
          vm.CashStat.outAmt = res.outAmt
        });
      },
      handleCurrentChange(val) {
        this.fetchData(val);
      },
      transferAccount(outTradeNo) {
        var that = this;
        var vm = this;
        vm.dataApi.ajax('storeOkWithraw', {
          outTradeNo: outTradeNo
        }, res => {
          that.$message.success('订单号：' + outTradeNo + '转账成功');
          // 转账完成后，执行一次查询
          that.fetchData(that.pageInfo.pageNum);
        });
      },
      deriveSubmit() {
        // 有待修改
        let vm = this
        let tranferType = vm.formInline.tranferType;
        let status = vm.formInline.status;
        // let starttime =dateFormat(vm.startTime);
        // let stoptime =dateFormat(vm.endTime);
        let starttime =vm.startTime.getTime();
        let stoptime =vm.endTime.getTime();

        let mewstatus = '';
        // console.log('导出参数',tranferType,status)
        if (!status) {
          // console.log('状态是全部')
          mewstatus = '';
        } else if (status == 'P') {
          // console.log('状态是处理中')
          mewstatus = 'P';
        } else if (status == 'TRANSFER_SUCCESS') {
          // console.log('状态是成功')
          mewstatus = 'S';
        }
        console.log('传值数据',tranferType,mewstatus,starttime,stoptime);
        let host = 'https://console.hzsuhu.cn/enve/'
        // let host = 'http://192.168.1.161:8080/enve-web/';
        location.href = encodeURI(encodeURI(host + "WithdrawControl/exportWithdrawal?tranferType=" + tranferType +
          '&status=' + mewstatus+'&orderTimeStart='+starttime+'&orderTimeEnd='+stoptime))
      },
      tcopen(val) {
              console.log(JSON.stringify(val))
              this.$notify({
                title: '最终状态',
                message: JSON.stringify(val),
                duration: 0
              });
      },
      // tcopen(val) {
      //         this.$alert(val, '最终状态', {
      //           confirmButtonText: '确定',
      //           callback: action => {
      //             // this.$message({
      //             //   type: 'info',
      //             //   message: `action: ${ action }`
      //             // });
      //           }
      //         });
      //       }
    }
  }
</script>

<style scoped>
  .failyy{
    max-height: 30px;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }
  .success_stuts{
    color: #04BE02;
  }
  .ing_stuts{
    color: #0066CC;
  }
  .fail_stuts{
    color: #D43F3A;
  }
</style>
